<template>
  <div class="app-container">
    <span>请选择消息类型：</span>
    <el-select v-model="value" placeholder="请选择">
      <el-option label="All" value="0"/>
      <el-option label="通知" value="1"/>
      <el-option label="公告" value="2"/>
    </el-select>
    <el-button v-show="value!='3'" type="primary" @click="addMessageHandle">添加</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top:30px">
      <el-table-column align="center" label="ID" prop="id"/>
      <el-table-column align="center" label="类型" prop="typeValue" />
      <el-table-column align="center" label="标题" prop="title" />
      <el-table-column align="center" label="内容" prop="content" />
      <el-table-column align="center" label="发布时间">
        <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateMessageHandle(scope.row)">更新</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="120px">
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="通知" value="1"/>
            <el-option label="公告" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item v-show="addFlag" label="发送对象">
          <el-select v-model="form.toUser" placeholder="请选择">
            <el-option label="全部" value="-1"/>
            <el-option label="指定用户" value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item v-show="form.toUser!='-1'" label="指定用户">
          <el-input v-model="form.userIds" type="textarea" placeholder="多个ID请使用英文逗号“,”相隔"/>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title"/>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="form.content" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="form.title&&form.content?false:true" type="primary" @click="confirmSetVersion">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMessageList, updateMessage, addMessage } from '@/api/table'
import { parseTime } from '@/utils/index'
export default {
  name: 'Message',
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      value: '0',
      list: null,
      listLoading: true,

      dialogFormVisible: false,
      form: {
        id: '',
        type: '1',
        toUser: '-1',
        userIds: '',
        title: '',
        content: ''
      },

      title: '',
      addFlag: false
    }
  },
  watch: {
    value(val) {
      this.fetchData(val)
    }
  },
  created() {
    this.fetchData('0')
  },
  methods: {
    fetchData(type) {
      this.listLoading = true
      getMessageList({ 'type': this.value }).then(response => {
        setTimeout(() => {
          this.listLoading = false
        }, 300)
        this.list = response.data
      })
    },
    updateMessageHandle(item) {
      this.addFlag = false
      this.title = '更新消息'
      this.dialogFormVisible = true
      this.form.type = '1'
      this.form.id = item.id
      this.form.title = item.title
      this.form.content = item.content
    },
    confirmSetVersion() {
      var params = {}
      if (this.addFlag) {
        // 添加
        params = {
          type: this.form.type,
          userIds: this.form.toUser === '-1' ? '-1' : this.form.userIds,
          title: this.form.title,
          content: this.form.content
        }
      } else {
        // 修改
        params = {
          id: this.form.id,
          type: this.form.type,
          title: this.form.title,
          content: this.form.content
        }
      }
      if (this.addFlag) {
        // 添加
        addMessage(params).then(response => {
          if (response.code === 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
          this.fetchData(this.value)
          this.dialogFormVisible = false
        })
      } else {
        // 更新
        updateMessage(params).then(response => {
          if (response.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
          } else {
            this.$message.error(response.msg)
          }
          this.fetchData(this.value)
          this.dialogFormVisible = false
        })
      }
    },
    addMessageHandle() {
      this.addFlag = true
      this.title = '新增消息'
      this.dialogFormVisible = true
      this.form.type = '1'
      this.form.toUser = '-1'
      this.form.title = ''
      this.form.content = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.name{
  color:#409EFF;
}
</style>
